<template>
    <div>
        <el-row>
            <el-col :span="18">
                <div style="text-align: center; margin: 10px; font-size: 20px; color:#019BA0;">
                    <i class="el-icon-view"></i>
                    <span>所有设备</span>
                </div>
            </el-col>
        </el-row>
        <el-table :data="baseStockList" border stripe style="width: 100%">
            <el-table-column prop="no" label="型号" width="200">
            </el-table-column>
            <el-table-column prop="name" label="名称" width="200">
            </el-table-column>
            <el-table-column prop="buycount" label="总量" width="200">
            </el-table-column>
            <el-table-column prop="usecount" label="使用量" width="200">
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" @click="getBaseDevice(scope.row.id); table = true;">详 情</el-button>
                    <el-button @click="deleteOne(scope.row.id)" type="danger" size="mini">删 除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row>
            <el-col :span="18">
                <div class="pagination" style="text-align: center; margin-top: 20px;">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.pageNum" :page-sizes="[5, 10, 15, 30]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>

        <el-drawer :with-header="false" :visible.sync="table" direction="rtl" size="40%">
            <div style="color: #019BA0; font-size: 22px; margin:50px; width: 100%;">
                <span>设备分布及状态</span>
            </div>
            <div style="font-size: 20px; margin:50px; width: 100%;">
                <span>
                    <!-- 设备类型:<span style="color:#019BA0;"></span> -->
                    <span style="margin-left: 10px;">总量:<span style="color: #007c5b;">{{ deviceInfo.stocknum }}</span></span>
                    <span style="margin-left: 10px;">已用:<span style="color: #ff0000;">{{ deviceInfo.usenum }}</span></span>
                    <span style="margin-left: 10px;">剩余:<span style="color: #007c5b;">{{ deviceInfo.leftnum }}</span></span>
                    <span style="margin-left: 10px;">报废:<span style="color: #ff0000;">{{ deviceInfo.dumpingnum }}</span></span>
                </span>
            </div>
            <el-table :data="baseDevice">
                <el-table-column property="childname" label="设备名" width="200"></el-table-column>
                <el-table-column property="childstatus" label="设备状态" width="200">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.childstatus == '良好'" type="success" size="mini" round>良好</el-button>
                        <el-button v-if="scope.row.childstatus == '已报修'" type="warning" size="mini" round>检修</el-button>
                        <el-button v-if="scope.row.childstatus == '报废'" type="danger" size="mini" round>报废</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="updateVisible = true; getInfo(scope.row)" round>修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row>
                <el-col :span="24" style="text-align: center; margin-top: 10px;">
                    <el-button type="success" @click="addVisible = true" round>添加</el-button>
                </el-col>
            </el-row>
        </el-drawer>

        <el-dialog title="修改设备状态" :visible.sync="updateVisible">
            <el-form :model="oneDevice">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="状态" label-width="100px">
                            <el-select v-model="oneDevice.childstatus" placeholder="请选择状态">
                                <el-option label="良好" value="良好"></el-option>
                                <el-option label="检修" value="已报修"></el-option>
                                <el-option label="报废" value="报废"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateDeviceStatus()">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="添加设备" :visible.sync="addVisible" style="text-align: left;">
            <el-row>
                <el-col :span="20" :offset="2">
                    <el-form :model="oneBaseDevice" label-width="80px" style="margin-top: 30px;">
                        <el-form-item label="名称" prop="name" :label-width="formLabelWidth">
                            <el-input v-model="oneBaseDevice.childname"></el-input>
                        </el-form-item>
                        <el-form-item label="总数" :label-width="formLabelWidth">
                            <el-input v-model="oneBaseDevice.stocknum"></el-input>
                        </el-form-item>
                        <el-form-item label="正在使用数量" :label-width="formLabelWidth">
                            <el-input v-model="oneBaseDevice.usenum"></el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOneDevice()">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
export default {
    data() {
        return {
            stockchildid: '',
            oneBaseDevice: {},
            addVisible: false,
            oneDevice: {},
            updateVisible: false,
            table: false,
            baseDevice: [],
            deviceInfo: {
                name: '',
                stocknum: 0,
                usenum: 0,
                leftnum: 0,
                dumpingnum: 0
            },
            dialogFormVisible: false,
            formLabelWidth: '120px',
            baseStock: {},
            baseStockList: [],
            pageInfo: {
                pageNum: 1,
                pageSize: 5
            },
        }
    },
    methods: {
        addOneDevice() {
            this.oneBaseDevice.stockchildid = this.stockchildid;
            this.$axios.post("/base/addOneDevice", this.oneBaseDevice)
                .then((result) => {
                    if (result.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: result.data.message
                        });
                        this.addVisible = false;
                        this.showList();
                        this.getBaseDevice();
                    } else {
                        this.$message.error(result.data.message);
                    }
                }).catch((err) => {
                    console.log(err);
                });
        },
        getInfo(row) {
            this.oneDevice = row;
        },
        updateDeviceStatus() {
            this.$axios.put("/base/updateDeviceStatus", this.oneDevice)
                .then((result) => {
                    if (result.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: result.data.message
                        });
                        this.updateVisible = false;
                        this.showList();
                    } else {
                        this.$message.error(result.data.message);
                    }
                }).catch((err) => {
                    console.log(err);
                });
        },
        getBaseDevice(id) {
            this.stockchildid = id;
            this.$axios.get("/base/selectBaseDevice/" + id)
                .then((result) => {
                    if (result.data.code == 200) {
                        this.baseDevice = result.data.data;
                        this.deviceInfo.stocknum = result.data.data.length;
                        this.deviceInfo.usenum = result.data.data.filter(item => item.childstatus == '使用').length;
                        this.deviceInfo.leftnum = result.data.data.filter(item => item.childstatus == '良好').length;
                        this.deviceInfo.dumpingnum = result.data.data.filter(item => item.childstatus == '报废').length;
                    } else {
                        this.$message.error(result.data.message);
                    }
                }).catch((err) => {
                    console.log(err);
                });
        },
        deleteOne(id) {
            this.$confirm('此操作将永久删除该设备, 是否继续?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.delete("/base/deleteBaseStockById/" + id)
                    .then((result) => {
                        if (result.data.code == 200) {
                            this.$message({
                                type: 'success',
                                message: result.data.message
                            });
                            this.showList();
                        } else {
                            this.$message.error(result.data.message);
                        }
                    }).catch((err) => {
                        console.log(err);
                    });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '操作已取消'
                });
            });
        },
        handleCurrentChange(val) {
            this.pageInfo.pageNum = val;
            this.showList();
        },
        handleSizeChange(val) {
            this.pageInfo.pageSize = val;
            this.showList();
        },
        showList() {
            this.$axios.get("/base/selectBaseStockAll?pageNum=" + this.pageInfo.pageNum + "&pageSize=" + this.pageInfo.pageSize)
                .then((result) => {
                    if (result.data.code == 200) {
                        this.pageInfo = result.data.data;
                        this.baseStockList = result.data.data.list;
                    }
                }).catch((err) => {
                    console.log(err);
                });
        }
    },
    mounted() {
        this.showList();
    },
};
</script>

<style>
.pagination {
    text-align: left;
}
</style>
